<template>
   <div class="user-profile-page">
     <van-nav-bar
       left-arrow
       @click-left="$router.back()"
       title="个人信息"
     ></van-nav-bar>
     <van-cell-group>
       <van-cell
       @click="$refs.file.click()"
       is-link
       title="头像"
       center>
         <van-image
           slot="default"
           fit="cover"
           round
           :src="userprofile.photo"
         />
       </van-cell>
       <van-cell
       is-link title="昵称"
       :value="userprofile.name||'未填写'"
       @click="openNamePopup()" />
     </van-cell-group>
     <van-cell-group style="margin-top: 12px">
       <van-cell
       is-link title="性别"
       @click="showGender = true"
       :value="userprofile.gender===0?'男':'女'" />
       <van-cell
       is-link title="生日"
       @click="openBirthdayPopup"
        :value="userprofile.birthday || '未填写'"/>
     </van-cell-group>
     <div class="logout">
       <span @click="logout">退出登录</span>
     </div>
     <input
     @change="iseditUserPhoto"
     type="file" ref="file"
     style="display: none" />

     <!-- 修改昵称弹层 -->
     <van-popup class="my-popup" v-model="showName" position="right">
       <van-nav-bar
         left-arrow
         @click-left="showName = false"
         @click-right="iseditName()"
         right-text="保存"
         title="修改昵称"
       />
       <van-field v-model="name"></van-field>
     </van-popup>

     <!-- 修改性别 -->
    <van-action-sheet
      v-model="showGender"
      :actions="[
        { name: '男', value: 0 },
        { name: '女', value: 1 },
      ]"
      @select="saveGender"
      cancel-text="取消"
    />

     <!-- 修改生日 -->
     <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        v-model="birthday"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showBirthday = false"
        @confirm="saveBirthday"
      />
    </van-popup>
   </div>
 </template>

<script>
import dayjs from 'dayjs'
import { getUserProfile, iseditUserPhoto, iseditUserInfo } from '@/api/user'
export default {
  name: 'UserProfilePage',
  data () {
    return {
      // 修改生日
      showBirthday: false,
      birthday: new Date(),
      minDate: new Date('1960-01-01'),
      maxDate: new Date(),
      // 修改性别
      showGender: false,
      // 修改信息弹层
      showName: false,
      name: '',
      userprofile: {}
    }
  },
  created () {
    this.getUserProfile()
  },
  methods: {
    // 修改用户生日
    async saveBirthday () {
      // 转换格式
      const date = dayjs(this.birthday).format('YYYY-MM-DD')
      const [err] = await iseditUserInfo({ birthday: date })
      if (err) return this.$toast.fail('更新失败')
      this.userprofile.birthday = date
      this.showBirthday = false
      this.$toast.success('更新成功')
    },
    // 打开日期选择器
    openBirthdayPopup () {
      this.showBirthday = true
      // 给日期控件赋值，当前用户的生日
      this.birthday = new Date(this.userprofile.birthday)
    },
    // 修改用户性别
    async saveGender (item) {
      const [err] = await iseditUserInfo({ gender: item.value })
      if (err) return this.$toast.fail('更新失败')
      this.userprofile.gender = item.value
      this.showGender = false
      this.$toast.success('更新成功')
    },
    // 保存昵称
    async iseditName () {
      if (!this.name) return this.$toast('请输入昵称')
      const [err] = await iseditUserInfo({ name: this.name })
      if (err) return this.$toast.fail('更新失败')
      // 更新单元格中的昵称
      this.userprofile.name = this.name
      this.showName = false
      this.$toast.success('更新成功')
    },
    // 打开修改名称弹出框
    openNamePopup () {
      this.showName = true
      this.name = this.userprofile.name
    },
    async iseditUserPhoto () {
      const file = this.$refs.file.files[0]
      if (file) {
        // 上传图片
        // 1. 包装一个formData对象，字段名字photo指向的是选择的图片
        const data = new FormData()
        data.append('photo', file)
        // 2. 调用API接口
        const [err, res] = await iseditUserPhoto(data)
        if (err) return this.$toast.fail('编辑失败')
        this.userprofile.photo = res.data.data.photo
        this.$toast.success('修改成功')
      }
    },
    async logout () {
      await this.$dialog.confirm({
        title: '温馨提示',
        message: '确认退出吗？',
        theme: 'round-button'
      })
      this.$store.commit('setToken', '')
      this.$store.commit('setRefreshToken', '')
      this.$router.push('/')
      this.$toast.success('退出成功')
    },
    async getUserProfile () {
      const [err, res] = await getUserProfile()
      if (err) return this.$toast.fail('获取失败')
      console.log(res)
      this.userprofile = res.data.data
    }
  }
}
</script>

 <style lang="less" scoped>
 .user-profile-page {
   background: #f8f8f8;
   .van-image {
     display: block;
     float: right;
     width: 30px;
     height: 30px;
   }
   .van-cell__title {
     width: 50px;
     flex: none;
   }
   .my-popup {
    width: 100%;
    height: 100%;
    /deep/ .van-nav-bar__text {
      color: @geek-color;
    }
    /deep/ .van-field__control {
      background: @geek-gray-color;
      padding: 10px;
      border-radius: 4px;
    }
  }
  .logout {
   text-align: center;
   position: absolute;
   left: 0;
   bottom: 30px;
   width: 100%;
   color: @geek-color;
 }
 }

 </style>
